<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 courseMy">
        <div class="main-left2 width100">
          <div class="con2">
            <div class="nav-tit">
              <div class="mleft">
                <h1 class="cur" @click="goCourse()">我的课程</h1>
                <div class="mright">
                  <el-input
                    v-model="keyword"
                    style="width: 223px;"
                    class="fl search-inp"
                    placeholder="输入名称搜索"
                  ></el-input>
                  <el-button class="fl" @click="getMy(page, status, keyword,current)">搜索</el-button>
                </div>
              </div>

              <div class="f-back fr" @click="goBack()">
                <img src="static/img/yinyong.png" style="width: 18px; height: 18px" />返回
              </div>
            </div>
            <div class="clear"></div>

            <div class="clear"></div>
            <div class="filter">
              <dl>
                <dd :class="{'cur':current==-1}" @click="getMy(1,'', keyword,-1)">全部</dd>
                <dd
                  :class="{'cur':current==index}"
                  v-for="(item, index) in type"
                  :key="index"
                  @click="getMy(page,index, keyword,index)"
                >{{ item }}</dd>
              </dl>
            </div>
            <div class v-if="my_lesson.length > 0">
              <ul class="my-c-list">
                <li v-for="(item, index) in my_lesson" :key="index" @click="goDetail(item.cid)">
                  <div class="pic_area">
                    <img classs="pic" :src="item.image" />
                  </div>
                  <label class="jk">{{ item.contentnum }}节课</label>
                  <p>
                    <span class="tit more">{{ item.name }}</span>
                  </p>
                  <p>
                    {{ item.validity }}
                    <span v-if="item.validity_status==1">到期</span>
                  </p>
                  <p>
                    <label class="mr20">{{ item.studynum }}次学习</label>
                    <label class="fr" v-if="item.paynumber == 0">未开始学习</label>
                  </p>
                </li>
              </ul>
            </div>
            <div class v-else>
              <el-empty description="暂无内容"></el-empty>
            </div>
            <div class="page-area" v-if="my_lesson.length>0">
              <span
                type="button"
                class="btn-home fl"
                style="cursor: pointer;"
                @click="getMy(1, status, keyword,current)"
              >首页</span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :current-page="page"
                :total="total"
                :page-size="1"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span
                type="button"
                style="cursor: pointer;"
                class="btn-last fr"
                @click="getMy(total, status, keyword,current)"
              >尾页</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="r-xcx">
      <span class="sp">微信小程序</span>
      <div class="r-xcx2">
        <h3>培训平台小程序</h3>
        <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue'
export default {
  data() {
    return {
      value: [],
      type: ['未进行', '进行中', '已完成', '已过期'], //我的课程类型
      keyword: '', //搜索关键字
      page: 1, //页码
      status: '', //课程状态
      my_lesson: [], //我的课程
      total: 1,
      current: -1,
      token: localStorage.getItem('token'),
    }
  },
  created() {
    this.getMy(1, '', '', -1)
  },
  methods: {
    goDetail(id) {
      this.$router.push('/trainDetail?id=' + id)
    },
    goBack() {
      this.$router.go(-1)
    },
    getMy(page, status, keyword, index) {
      this.page = page
      this.status = status
      this.keyword = keyword
      this.current = index
      let formData = {
        token: this.token,
        page: this.page,
        limit: 8,
        status: this.status,
        keyword: this.keyword,
      }
      this.$api('getCourseList.getUserList', formData).then((res) => {
        this.my_lesson = res.data.data
        this.total = res.data.last_page
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.getMy(this.page, this.status, this.keyword, this.current)
    },
    goCourse() {
      this.$router.push('/courseList')
    },
    goCollect() {
      this.$router.push('/courseCollect')
    },
  },
  components: { Header },
}
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
.mleft {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}
.cur {
  margin-right: 20px;
}
</style>
